<template>
  <div>
	<a-spin :spinning="isLoading">
		<div class="kg-head-he"></div>
		<header class="kg-head reg-top">
			<div class="dqxz"  @click="back"><i class="micon">&#xe61e;</i></div>
			<div class="search_box show-cansu">
				作品上传
			</div>
		</header>
		<!---->
		<div class="kg-center">
				<!---->
				<div class="kg-ksbox mb25">
					<div class="kg-ksxqbox hy-ksjgzt">
						考级作品上传截止日期<p v-if="sign.address">{{sign.address.time_end}} 23:59</p>
						<div class="zpsc-ts">请在考级作品上传截止日期上传考级相关视频内容</div>
					</div>
				</div>
				<!---->
				<div class="kg-ksbox mb25">
					<div class="title">
					<div class="title_a">考级内容</div>
					</div>
					
					<div class="kg-ksxqbox">
						<div class="kg-ksxq-list">
							<div class="kg-ksxq-lista">报考专业</div>
							<div class="kg-ksxq-listb">
								<div class="kg-ksxq-listc">{{sign.major_first}}</div>
								<div class="kg-ksxq-listc">{{sign.major_second}}</div>
							</div>
						</div>
						<div class="kg-ksxq-list">
							<div class="kg-ksxq-lista">报考等级</div>
							<div class="kg-ksxq-listb">{{sign.grade}}</div>
						</div>
						<div class="kg-ksxq-list">
							<div class="kg-ksxq-lista">考试曲目</div>
							<div class="kg-ksxq-listb">{{sign.sign_item}}</div>
						</div>
					</div>
				</div>
		<!---->   
			<div class="kg-ksbox mb25">
				<div class="title">
				<div class="title_a">作品上传</div>
				</div>
				
				<div class="kg-ksxqbox">
					<div class="kg-ksxq-list height-auto bg-none">
						<div class="kg-ksxq-lista">作品要求</div>
						<div class="kg-ksxq-listb line-h40">
							作品类型：视频，格式：MP4，视频大小：不超过700M。
						</div>
					</div>
					
					<div class="kg-ksxq-list height-auto bg-none">
						<div class="kg-ksxq-lista">视频上传</div>
						<div class="kg-ksxq-listb">
							<a-upload
							 	ref="uploadRef"
								list-type="picture-card"
								accept="video/*"
								name="file"
								:action="action"
								:headers="headers"
								:maxCount="1"
								:capture="null"
								:show-upload-list="false"
								:before-upload="beforeUpload"
								@change="handleChange"
							>
							<div>
								<video  v-if="file_id" :src="file_path" style="width:100%;"></video>
								<div v-else>
									<a-progress type="circle" v-if="percentage" :percent="percentage" :width="80" />
									<div class="ant-upload-text" v-if="!percentage">上传</div>
								</div>

							</div>
							</a-upload>
						</div>
					</div>
				</div>
			</div>
			<!---->
			        <!---->
        <button class="but-a mt50" v-if="file_id"  @click="saveFile">提交审核</button>
        <button class="but-a mt50" v-else disabled="true">请上传作品</button>

			
		<!---->   	
		</div>
	</a-spin>
	
  </div>
 
</template>

<script>
import { detail,saveFile} from '@/api/sign/index'
import * as UploadApi from '@/api/upload'
import { message } from 'ant-design-vue'
import { useRouter } from "vue-router"
import storage from 'store'
import { defineComponent } from "vue";

export default defineComponent({
  name: 'Upload',
  data(){
	return{
		uploadUrl: UploadApi.video,
		isLoading: false,// 正在加载
		sign_id:0,
		sign:{},
		action:window.publicConfig.BASE_API+"upload/video",
		headers:{'Access-Token':storage.get('Access-Token')},
		file_id:0,
		file_path:'',
		percentage:0,
		
	}
  },

  created () {
    this.sign_id = this.$route.query.sign_id
    this.getSign();
  },
  methods: {
	back(){this.$router.back()},
    getSign(){
		detail({sign_id:this.sign_id}).then(result=>{
			this.sign = result.data.sign;
			this.file_id   = this.sign.file_id;
			this.file_path = this.sign.signFile && this.sign.signFile.external_url
		})
	},
	saveFile(){
		
		if(!this.file_id) return false;
		let pramas = {
			sign_id:this.sign_id,
			file_id:this.file_id
		}
		this.isLoading = true;
		saveFile(pramas).then(result=>{
			this.isLoading = false;
			message.success(result.message, 1.5);
			this.$router.push('/grading');
		}).finally(()=>{
			this.isLoading = false;
		})
	},
	handleChange(info){
	  this.percentage = parseInt(info.file.percent*10)/10;
	  if (info.file.status === 'uploading') {
        return;
      }
      if (info.file.status === 'done') {
		this.percentage = 0;
		if(info.file.response.status==200){
			this.file_id = info.file.response.data.fileInfo.file_id;
			this.file_path = info.file.response.data.fileInfo.external_url;
			message.success(info.file.response.message, 1.5);
			return;
		}
      	message.error(info.file.response.message);return;
      }
      if (info.file.status === 'error') {
        this.percentage = 0;
        message.error('upload error');return;
      }
	},
	// 事件: 自定义上传
	onUpload (info) {
		this.isLoading = true;
		this.file_id = 0;
		this.file_path = '';
		this.tip = '上传中，请勿关闭页面';
		// 构建上传参数
		const formData = new FormData();
		formData.append('file', info.file)
		// 开始上传
		this.uploadUrl(formData,(progress)=>{
					this.percentage = parseInt(progress.progress*100);
				}).then((values) => {
				this.percentage = 0;
				this.file_id = values.data.fileInfo.file_id;
				this.file_path = values.data.fileInfo.external_url;
				this.isLoading = false;
				this.tip = '';
				message.success(values.message, 1.5)
				
			}).catch(error=>{
				this.isLoading = false;
				this.tip = '';
				message.error(error, 1.5)
			}).finally(()=>{
				this.tip = '';
				this.isLoading = false;
			})
	},

	beforeUpload(file){
		this.file_id=0;
		this.file_path=''
		this.percentage=0
		const isVideo = file.type === 'video/mp4';
		if (!isVideo) {
			message.error('请上传.mp4格式视频!');
		}
		const isLt2M = file.size / 1024 / 1024 < 700;
		if (!isLt2M) {
			message.error('上传视频不能超过700M!');
		}
		return isVideo && isLt2M;
	}
	
  }
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
